<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>
    <title>应急指挥中心</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        :root {
            --primary: #165DFF;
            --primary-dark: #0E42D2;
            --danger: #FF4D4F;
            --danger-dark: #D93636;
            --success: #52C41A;
            --warning: #FAAD14;
            --dark: #1F2937;
            --light: #F9FAFB;
            --gray: #6B7280;
            --light-gray: #E5E7EB;
            --shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
            --shadow-hover: 0 10px 25px rgba(22, 93, 255, 0.1);
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
            background-color: #F5F7FA;
            min-height: 100vh;
            line-height: 1.5;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* 顶部导航 */
        header {
            background-color: white;
            box-shadow: var(--shadow);
            padding: 15px 0;
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .logo-icon {
            width: 40px;
            height: 40px;
            background-color: var(--primary);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 20px;
        }

        .logo-text h1 {
            color: var(--dark);
            font-size: 1.4rem;
            font-weight: 700;
        }

        .logo-text p {
            color: var(--gray);
            font-size: 0.8rem;
        }

        .user-panel {
            display: flex;
            align-items: center;
            gap: 20px;
        }

        .time-display {
            color: var(--gray);
            font-size: 0.9rem;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .time-display i {
            color: var(--primary);
        }

        .user-info {
            display: flex;
            align-items: center;
            gap: 10px;
            padding-left: 15px;
            border-left: 1px solid var(--light-gray);
        }

        .user-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background-color: var(--primary);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: 600;
            cursor: pointer;
        }

        .user-name {
            font-size: 0.9rem;
            font-weight: 500;
        }

        /* 退出登录按钮 */
        .logout-btn {
            color: var(--gray);
            background: none;
            border: none;
            cursor: pointer;
            font-size: 0.9rem;
            padding: 5px 10px;
            border-radius: 4px;
            transition: all 0.2s ease;
        }

        .logout-btn:hover {
            color: var(--danger);
            background-color: rgba(255, 77, 79, 0.1);
        }

        /* 主功能区 */
        .main-title {
            font-size: 1.3rem;
            color: var(--dark);
            margin: 20px 0 15px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .main-title i {
            color: var(--primary);
        }

        .dashboard {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .card {
            background-color: white;
            border-radius: 12px;
            padding: 25px;
            box-shadow: var(--shadow);
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            gap: 15px;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            text-decoration: none;
            position: relative;
            overflow: hidden;
            cursor: pointer;
        }

        .card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background-color: var(--primary);
            transition: height 0.3s ease;
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-hover);
        }

        .card:hover::before {
            height: 6px;
        }

        .card.emergency {
            grid-column: span 2; /* 跨两列 */
        }

        .card.emergency::before {
            background-color: var(--danger);
        }

        .card-icon {
            width: 60px;
            height: 60px;
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            margin-bottom: 10px;
        }

        .card-icon.disaster {
            background-color: rgba(22, 93, 255, 0.1);
            color: var(--primary);
        }

        .card-icon.alert {
            background-color: rgba(250, 173, 20, 0.1);
            color: var(--warning);
        }

        .card-icon.resource {
            background-color: rgba(82, 196, 26, 0.1);
            color: var(--success);
        }

        .card-icon.action {
            background-color: rgba(255, 77, 79, 0.1);
            color: var(--danger);
            width: 70px;
            height: 70px;
            font-size: 32px;
        }

        .card h3 {
            color: var(--dark);
            font-size: 1.2rem;
            font-weight: 600;
        }

        .card p {
            color: var(--gray);
            font-size: 0.9rem;
            margin-bottom: 15px;
            line-height: 1.6;
        }

        .btn {
            display: inline-block;
            padding: 10px 20px;
            border-radius: 8px;
            font-weight: 500;
            font-size: 0.9rem;
            text-decoration: none;
            transition: all 0.3s ease;
            margin-top: auto;
        }

        .btn.primary {
            background-color: var(--primary);
            color: white;
        }

        .btn.primary:hover {
            background-color: var(--primary-dark);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(22, 93, 255, 0.2);
        }

        .btn.emergency {
            background-color: var(--danger);
            color: white;
            padding: 12px 30px;
            font-size: 1rem;
            font-weight: 600;
            width: 100%;
            max-width: 300px;
        }

        .btn.emergency:hover {
            background-color: var(--danger-dark);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(255, 77, 79, 0.2);
        }

        /* 底部信息 */
        footer {
            text-align: center;
            margin: 50px 0 30px;
            padding-top: 20px;
            border-top: 1px solid var(--light-gray);
            color: var(--gray);
            font-size: 0.85rem;
        }

        /* 模态框样式 */
        .modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 200;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }

        .modal.active {
            opacity: 1;
            visibility: visible;
        }

        .modal-content {
            background-color: white;
            border-radius: 12px;
            padding: 30px;
            max-width: 500px;
            width: 90%;
            transform: scale(0.8);
            transition: transform 0.3s ease;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
        }

        .modal.active .modal-content {
            transform: scale(1);
        }

        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .modal-header h3 {
            color: var(--dark);
            font-size: 1.2rem;
            font-weight: 600;
        }

        .close-modal {
            font-size: 1.5rem;
            color: var(--gray);
            cursor: pointer;
            transition: color 0.3s ease;
        }

        .close-modal:hover {
            color: var(--dark);
        }

        .modal-body {
            margin-bottom: 25px;
        }

        .modal-body p {
            color: var(--gray);
            line-height: 1.6;
        }

        .modal-footer {
            display: flex;
            justify-content: flex-end;
            gap: 15px;
        }

        .modal-btn {
            padding: 10px 25px;
            border-radius: 8px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .modal-btn.confirm {
            background-color: var(--danger);
            color: white;
        }

        .modal-btn.confirm:hover {
            background-color: var(--danger-dark);
        }

        .modal-btn.cancel {
            background-color: var(--light-gray);
            color: var(--dark);
        }

        .modal-btn.cancel:hover {
            background-color: #d1d5db;
        }

        /* 成功提示样式 */
        .success-toast {
            position: fixed;
            top: 20px;
            right: 20px;
            background-color: var(--success);
            color: white;
            padding: 15px 25px;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            display: flex;
            align-items: center;
            gap: 10px;
            transform: translateX(150%);
            transition: transform 0.5s ease;
            z-index: 300;
        }

        .success-toast.active {
            transform: translateX(0);
        }

        /* 响应式调整 */
        @media (max-width: 992px) {
            .card.emergency {
                grid-column: span 1; /* 小屏幕时占一列 */
            }
        }

        @media (max-width: 768px) {
            .dashboard {
                grid-template-columns: 1fr;
            }

            .header-content {
                flex-direction: column;
                gap: 15px;
                padding: 10px 0;
            }

            .user-panel {
                width: 100%;
                justify-content: space-between;
                padding-top: 10px;
                border-top: 1px solid var(--light-gray);
            }

            .modal-content {
                padding: 25px 20px;
            }
        }

        @media (max-width: 576px) {
            .card-icon {
                width: 50px;
                height: 50px;
                font-size: 24px;
            }

            .card h3 {
                font-size: 1.1rem;
            }

            .modal-footer {
                flex-direction: column;
                gap: 10px;
            }

            .user-info {
                flex-wrap: wrap;
            }
        }
    </style>
    <!-- 引入字体和图标 -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
<!-- 顶部导航 -->
<header>
    <div class="container">
        <div class="header-content">
            <div class="logo">
                <div class="logo-icon">
                    <i class="fas fa-shield-alt"></i>
                </div>
                <div class="logo-text">
                    <h1>应急指挥中心</h1>
                    <p>Emergency Command Center</p>
                </div>
            </div>

            <div class="user-panel">
                <div class="time-display">
                    <i class="far fa-clock"></i>
                    <span id="current-time"></span>
                </div>
                <div class="user-info">
                    <div class="user-avatar">
                        <i class="fas fa-user"></i>
                    </div>
                    <div class="user-name">应急人员</div>
                    <button class="logout-btn" id="logout-btn">
                        <i class="fas fa-sign-out-alt"></i> 退出登录
                    </button>
                </div>
            </div>
        </div>
    </div>
</header>

<div class="container">
    <!-- 主功能区 -->
    <h2 class="main-title">
        <i class="fas fa-cogs"></i> 功能操作
    </h2>
    <div class="dashboard">
        <a href="disasterManage.jsp" class="card">
            <div class="card-icon disaster">
                <i class="fas fa-exclamation-triangle"></i>
            </div>
            <h3>灾情信息管理</h3>
            <p>查看、处理和更新当前灾情信息，跟踪事件发展状态和处理进度</p>
            <span class="btn primary">进入管理</span>
        </a>

        <a href="alerts.jsp" class="card">
            <div class="card-icon alert">
                <i class="fas fa-bullhorn"></i>
            </div>
            <h3>发布预警信息</h3>
            <p>向居民和相关单位发送紧急预警通知，设置预警等级和影响范围</p>
            <span class="btn primary">发布通知</span>
        </a>

        <a href="resourceDispatch.jsp" class="card">
            <div class="card-icon resource">
                <i class="fas fa-ambulance"></i>
            </div>
            <h3>调度救援资源</h3>
            <p>管理并分配救援人员、车辆和物资，优化资源调配效率</p>
            <span class="btn primary">资源调度</span>
        </a>

        <div id="emergency-action-card" class="card emergency">
            <div class="card-icon action">
                <i class="fas fa-bolt"></i>
            </div>
            <h3>紧急行动启动</h3>
            <p>启动重大灾害应急响应预案，协调多部门联合行动</p>
            <span class="btn emergency" id="emergency-btn">立即启动</span>
        </div>
    </div>
</div>

<footer>
    <p>应急指挥中心管理系统 © 2025 | 版本 2.1.0 | </p>
</footer>

<!-- 紧急行动确认模态框 -->
<div id="emergency-modal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3><i class="fas fa-exclamation-triangle text-danger"></i> 确认启动紧急行动</h3>
            <span class="close-modal" id="close-emergency-modal">&times;</span>
        </div>
        <div class="modal-body">
            <p>您即将启动重大灾害应急响应预案，此操作将触发以下响应：</p>
            <ul style="padding-left: 20px; margin-top: 10px; color: var(--gray);">
                <li>通知所有相关应急单位和人员</li>
                <li>启动应急指挥中心全面协调机制</li>
                <li>触发公众预警系统发布紧急通知</li>
                <li>调配应急资源和救援队伍</li>
            </ul>
            <p class="mt-3" style="color: var(--danger); font-weight: 500;">请确认是否继续？</p>
        </div>
        <div class="modal-footer">
            <button class="modal-btn cancel" id="cancel-emergency">取消</button>
            <button class="modal-btn confirm" id="confirm-emergency">确认启动</button>
        </div>
    </div>
</div>

<!-- 退出登录确认模态框 -->
<div id="logout-modal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3><i class="fas fa-sign-out-alt text-primary"></i> 确认退出登录</h3>
            <span class="close-modal" id="close-logout-modal">&times;</span>
        </div>
        <div class="modal-body">
            <p>您确定要退出当前登录吗？退出后需要重新登录才能访问系统。</p>
        </div>
        <div class="modal-footer">
            <button class="modal-btn cancel" id="cancel-logout">取消</button>
            <button class="modal-btn confirm" id="confirm-logout">确认退出</button>
        </div>
    </div>
</div>

<!-- 成功提示框 -->
<div id="success-toast" class="success-toast">
    <i class="fas fa-check-circle"></i>
    <span>紧急预案已成功启动！</span>
</div>

<script>
    // 实时更新时间
    function updateTime() {
        const now = new Date();
        const options = {
            year: 'numeric',
            month: '2-digit',
            day: '2-digit',
            hour: '2-digit',
            minute: '2-digit',
            second: '2-digit',
            hour12: false
        };
        const timeString = now.toLocaleString('zh-CN', options);
        document.getElementById('current-time').textContent = timeString;
    }

    // 初始化时间并每秒更新
    updateTime();
    setInterval(updateTime, 1000);

    // 紧急行动模态框
    const emergencyBtn = document.getElementById('emergency-btn');
    const emergencyCard = document.getElementById('emergency-action-card');
    const emergencyModal = document.getElementById('emergency-modal');
    const closeEmergencyModal = document.getElementById('close-emergency-modal');
    const cancelEmergency = document.getElementById('cancel-emergency');
    const confirmEmergency = document.getElementById('confirm-emergency');

    // 退出登录相关元素
    const logoutBtn = document.getElementById('logout-btn');
    const logoutModal = document.getElementById('logout-modal');
    const closeLogoutModal = document.getElementById('close-logout-modal');
    const cancelLogout = document.getElementById('cancel-logout');
    const confirmLogout = document.getElementById('confirm-logout');

    const successToast = document.getElementById('success-toast');

    // 打开模态框通用函数
    function openModal(modalId) {
        document.getElementById(modalId).classList.add('active');
        document.body.style.overflow = 'hidden'; // 禁止背景滚动
    }

    // 关闭模态框通用函数
    function closeModal(modalId) {
        document.getElementById(modalId).classList.remove('active');
        document.body.style.overflow = ''; // 恢复背景滚动
    }

    // 显示成功提示
    function showSuccessToast(message) {
        successToast.querySelector('span').textContent = message;
        successToast.classList.add('active');
        setTimeout(() => {
            successToast.classList.remove('active');
        }, 3000); // 3秒后自动隐藏
    }

    // 紧急行动事件监听
    emergencyBtn.addEventListener('click', () => openModal('emergency-modal'));
    emergencyCard.addEventListener('click', (e) => {
        if (e.target !== emergencyBtn) {
            openModal('emergency-modal');
        }
    });
    closeEmergencyModal.addEventListener('click', () => closeModal('emergency-modal'));
    cancelEmergency.addEventListener('click', () => closeModal('emergency-modal'));

    confirmEmergency.addEventListener('click', () => {
        closeModal('emergency-modal');
        showSuccessToast('紧急预案已成功启动！');
        console.log('紧急预案已启动，执行相关操作...');
    });

    // 退出登录事件监听
    logoutBtn.addEventListener('click', () => openModal('logout-modal'));
    closeLogoutModal.addEventListener('click', () => closeModal('logout-modal'));
    cancelLogout.addEventListener('click', () => closeModal('logout-modal'));

    confirmLogout.addEventListener('click', () => {
        // 这里添加实际的退出登录逻辑
        closeModal('logout-modal');
        showSuccessToast('已成功退出登录！');

        // 模拟跳转到登录页面（实际项目中替换为真实登录页URL）
        setTimeout(() => {
            window.location.href = 'index.jsp';
        }, 1500);
    });

    // 点击模态框外部关闭
    document.querySelectorAll('.modal').forEach(modal => {
        modal.addEventListener('click', (e) => {
            if (e.target === modal) {
                closeModal(modal.id);
            }
        });
    });

    // 为卡片添加点击波纹效果
    document.querySelectorAll('.card').forEach(card => {
        if (card.id !== 'emergency-action-card') { // 排除紧急行动卡片
            card.addEventListener('click', function(e) {
                // 创建波纹元素
                const ripple = document.createElement('span');
                const rect = this.getBoundingClientRect();
                const x = e.clientX - rect.left;
                const y = e.clientY - rect.top;

                ripple.style.width = ripple.style.height = Math.max(rect.width, rect.height) * 2 + 'px';
                ripple.style.left = x - (parseInt(ripple.style.width) / 2) + 'px';
                ripple.style.top = y - (parseInt(ripple.style.height) / 2) + 'px';
                ripple.classList.add('ripple');

                // 清除已有的波纹
                const existing = this.querySelector('.ripple');
                if (existing) existing.remove();

                this.appendChild(ripple);
            });
        }
    });
</script>

<style>
    /* 点击波纹效果 */
    .ripple {
        position: absolute;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.3);
        transform: scale(0);
        animation: ripple 0.6s linear;
        pointer-events: none;
    }

    @keyframes ripple {
        to {
            transform: scale(1);
            opacity: 0;
        }
    }
</style>
</body>

</html>